<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按支付银行统计</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


</head>
<body>

<div id="app">
    <!-- 查询表单 -->
    <el-form
            :inline="true"
            size="small"
            :model="formData"
            class="demo-form-inline"
    >
        <el-form-item label="录入日期"  >
            <el-col :span="11">
                <el-date-picker
                        type="date"
                        placeholder="开始日期"
                        v-model="formData.start"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-date-picker
                        type="date"
                        placeholder="结束日期"
                        v-model="formData.end"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="toQuery">查询</el-button>
            <el-button type="primary" plain @click="printHtml">报表打印</el-button>
            <el-button type="primary" plain @click="expexcel">导出excel</el-button>
        </el-form-item>
    </el-form>

    <!-- 每页数据数量一定，最后一页需要显示合计 -->
    <div id="printListRoster">
        <div style="break-after: page;" v-for="(item,index) in list">
            <table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; font-size: 10px;">
                <caption>
                    <p style="font-size: 20px;">再就业人员补充医疗保险支出明细表</p>
                    <table border="0" width="100%">
                        <tr>
                            <td width="40%" align="left">编制单位：公共事务中心医疗保险中心</td>
                            <td>{{time_qj}}</td>
                        </tr>
                    </table>

                </caption>
                <tbody>
                <tr>
                    <th align="center" rowspan="2">序号</th>
                    <th align="center" rowspan="2">编号</th>
                    <th align="center" rowspan="2">身份证号</th>
                    <th align="center" rowspan="2">联系方式</th>
                    <th align="center" rowspan="2" style="width: 104px;" >姓名</th>
                    <th align="center" colspan="3">在职职工</th>
                    <th align="center" colspan="3">退休人员</th>
                    <th align="center" rowspan="2">合计</th>
                    <th align="center" rowspan="2">支付银行帐号</th>
                    <th align="center" rowspan="2">附件张数</th>


                </tr>
                <tr>
                    <th align="center">住院支出</th>
                    <th align="center">普通门诊支出</th>
                    <th align="center">特慢病门诊支出</th>
                    <th align="center">住院支出</th>
                    <th align="center">普通门诊支出</th>
                    <th align="center">特慢病门诊支出</th>
                </tr>

                <template v-for="(item1,index1) in item">
                    <tr>
                        <template v-if="item1.xh != '-1'" >
                            <td align="center">{{item1.xh}}</td>
                            <td align="center">{{item1.knn001}}</td>
                            <td align="center">{{item1.aac002}}</td>
                            <td align="center">{{item1.aae007}}</td>
                            <td align="center">{{item1.aac003}}</td>
                            <td align="center">{{NumberQfw(item1.c1)}}</td>
                            <td align="center">{{NumberQfw(item1.c2)}}</td>
                            <td align="center">{{NumberQfw(item1.c3)}}</td>
                            <td align="center">{{NumberQfw(item1.c4)}}</td>
                            <td align="center">{{NumberQfw(item1.c5)}}</td>
                            <td align="center">{{NumberQfw(item1.c6)}}</td>
                            <td align="center">{{NumberQfw(item1.c7)}}</td>

                            <td align="center">{{item1.aae006}}</td>
                            <td align="center">{{item1.kni030}}</td>
                        </template>

                        <template v-if="item1.xh == '-1'" >
                            <td align="center" colspan="5" >{{item1.name}}</td>
                            <td align="center">{{NumberQfw(item1.c1)}}</td>
                            <td align="center">{{NumberQfw(item1.c2)}}</td>
                            <td align="center">{{NumberQfw(item1.c3)}}</td>
                            <td align="center">{{NumberQfw(item1.c4)}}</td>
                            <td align="center">{{NumberQfw(item1.c5)}}</td>
                            <td align="center">{{NumberQfw(item1.c6)}}</td>
                            <td align="center">{{NumberQfw(item1.c7)}}</td>

                            <td align="center"></td>
                            <td align="center">{{item1.c8}}</td>
                        </template>
                    </tr>
                </template>

                </tbody>
            </table>
            <div style="display: flex; justify-content: space-around; margin-top: 30px; font-size: 10px;">
                <div>财务审核人：</div>
                <div>中心领导：</div>
                <div>稽核人：</div>

                <div>复核人：</div>
                <div>填报人：</div>
                <div>填报日期：{{time}}</div>
            </div>
        </div>
    </div>
</div>

<script>


    var vm = new Vue({
        el: "#app",
        data() {
            return {
                // 表格数据
                list: [],
                time_qj: "",
                time:"",
                formData:{"nka002":"2"},//根据人员类型统计
            };
        },
        created(){
            this.init();
        },
        methods: {
            NumberQfw(str){
                if(str == "/"){
                    return "";
                }
                if(Number(str) == 0){
                    return "";
                }
                if(str!="" && "/" != str){
                    let lw = parseFloat(str).toFixed(2);
                    return parseFloat(lw).toLocaleString("en",{ minimumFractionDigits: 2 });
                }
                return str;
            },
            init(){
                const res = renderTime(new Date(),"yyyy-MM-dd");
                let date_str = res.split("-");
                Vue.set(this.formData,"start",date_str[0]+"-"+date_str[1]+"-01");
                Vue.set(this.formData,"end",res);
            },
            async expexcel(){
                load();
                const res = await postWebCustom(getTableId("2042"),this.formData);
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                window.open(res.data);
            },
            printHtml() {
                $("#printListRoster").print();
            },
            async toQuery(){
                load();
                const res = await postWebCustom(getTableId("2015"),this.formData);
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                this.list = res.data.listpage;
                this.time_qj = res.data.time_qj;
                this.time = res.data.time;
            },

        },
    });

    function setData(data) {
        vm.setData(data);
    }
</script>
</body>
</html>